import React, { useCallback, useEffect, useState } from "react";
import { Form, Button, Input, Select, Tooltip, Space, DatePicker, message, Popconfirm, Image } from "antd";
import BatchSuffixInput from "@/views/components/BatchSuffixInput";
import BtnGroup from "@/views/components/BtnGroup";
import RangeDisablePicker from "@/views/components/RangeDisablePicker";
import ActionSelect from "@/views/components/ActionSelect";
import { DownOutlined, ShoppingFilled, TagFilled } from "@ant-design/icons";

import { GOODS_ACTION_TYPE } from "@/views/utils/constant";
export default ({ logType }) => {
	const [tabValue, setTabValue] = useState("spu");
	const [actionhouse, setActionhouse] = useState(null);
	const defaultColumns = [
		// {
		// 	tabs: ["spu"],
		// 	hidden: true,
		// 	// 按款式/按SKU：点击后，所有当前页面的查询条件、列表数据切换至SPU/SKU维度展示。
		// 	search: {
		// 		order: 1,
		// 		span: 3,
		// 		content: () => {
		// 			return (
		// 				<BtnGroup
		// 					value="spu"
		// 					options={[
		// 						{
		// 							label: "按款式",
		// 							value: "spu",
		// 							icon: <ShoppingFilled className="mr4" />
		// 						}
		// 					]}
		// 				/>
		// 			);
		// 		}
		// 	}
		// },
		{
			tabs: ["spu"],
			name: "款式编码",
			code: "spuCode",
			search: {
				order: 1,
				span: 2.5,
				content: () => <Input placeholder="请输入款式编码"></Input>
			}
		},
		{ tabs: ["spu"], name: "操作内容", code: "operContent", with: 300 },
		{
			tabs: ["spu"],
			name: "操作",
			code: "operType",
			render: value => (
				<span>
					{GOODS_ACTION_TYPE.map(item => {
						if (item.value == value) {
							return <span>{item.label}</span>;
						}
					})}
				</span>
			)
		},

		{
			tabs: ["spu"],
			name: "操作人",
			code: "operatorName",
			search: {
				order: 2,
				span: 2.5,

				code: "operatorId",
				content: () => {
					return <ActionSelect value={actionhouse} onChange={handleActionChange} />;
				}
			}
		},

		{
			tabs: ["spu"],
			name: "操作时间",
			code: "operTime",
			search: {
				order: 3,
				span: 5,
				keys: ["startTime", "endTime"],
				content: () => <RangeDisablePicker showTime diff="6 months" />
			}
		}
	];

	const handleActionChange = value => {
		setActionhouse(value);
	};
	const getColumns = useCallback(
		t => {
			return defaultColumns.filter(e => e.tabs.includes(t));
		},
		[tabValue]
	);
	const [columns2, setColumns] = useState(getColumns("spu"));
	const [isLogSkuType, setIsLogSkuType] = useState(true);
	useEffect(() => {
		setIsLogSkuType(tabValue === "spu");
		setColumns(getColumns(tabValue));
	}, [tabValue]);

	return { isLogSkuType, tabValue, setTabValue, columns2, defaultColumns, setColumns };
};
